<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/huayi_1.jpg") ?>" alt="华谊电影小镇基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/huayi_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/huayi_3.jpg") ?>" alt="电影场景环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;华谊兄弟（长沙）电影小镇研学基地位于长沙市湘江新区大王山旅游度假中心内，规划总用地约 1000亩，电影小镇选取了 “意大利风情” 与 “老长沙文化” 两个主题，引进 “电影”这一关键词，综合打造集“建筑旅游、电影旅游、科技旅游、文化旅游、非遗文化传承、民俗风情体验” 于一体的电影场景休闲度假体验地。</p>
                    <p class="text-indent-8">&emsp;&emsp;穿越彩虹桥，欧洲电影展知识科普，意大利面具DIY，电影海报DIY。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 电影中的梦幻世界 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 电影中的梦幻世界</h4>
                    <p class="text-gray-600">&emsp;&emsp;华谊电影小镇还原了众多经典电影场景，孩子们仿佛置身于电影之中，感受电影的魅力和奇幻。在这里，他们可以穿越不同的时代和地域，体验不一样的故事和文化。</p>
                </div>
                <!-- 精彩绝伦的演艺秀 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 精彩绝伦的演艺秀</h4>
                    <p class="text-gray-600">&emsp;&emsp;小镇内有各种精彩的演艺节目，如舞台剧、杂技表演等。演员们精湛的表演和绚丽的舞台效果，让孩子们沉浸其中，享受一场视觉和听觉的盛宴。</p>
                </div>
                <!-- 电影制作的奥秘 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 电影制作的奥秘</h4>
                    <p class="text-gray-600">&emsp;&emsp;孩子们可以参观电影制作的幕后工作室，了解电影拍摄、剪辑、特效等方面的知识。还可以亲自参与一些简单的电影制作环节，体验当小导演、小演员的乐趣。</p>
                </div>
                <!-- 特色美食体验 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">4. 特色美食体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;小镇汇聚了各地的特色美食，孩子们可以品尝到不同风味的小吃和菜肴。在享受美食的同时，了解各地的饮食文化。</p>
                </div>
                <!-- 亲子互动游乐项目 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">5. 亲子互动游乐项目</h4>
                    <p class="text-gray-600">&emsp;&emsp;小镇设有许多亲子互动游乐设施，如旋转木马、过山车等。孩子们可以和家长一起玩耍，增进亲子关系，同时也能锻炼勇气和胆量。</p>
                </div>
                <!-- 传统文化体验区 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">6. 传统文化体验区</h4>
                    <p class="text-gray-600">&emsp;&emsp;在这里，孩子们可以体验传统的手工艺制作，如剪纸、刺绣、陶艺等。通过亲手制作，感受传统文化的博大精深，培养动手能力和创造力。</p>
                </div>
            </div>

            <!-- 华谊电影小镇一日研学课程安排 -->
            
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【华谊电影小镇一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 20%;"> <!-- 时间列 -->
                <col style="width: 20%;"> <!-- 环节列 -->
                <col style="width: 60%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">9:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">入园集合</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">入园集合、上洗手间、清点人数。</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">9:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">欢迎仪式</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">集体欢迎仪式</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:00 - 10:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《建筑艺术》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">欧洲建筑知识课堂</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:30 - 11:10</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《装饰艺术》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">哥特式建筑的内部装饰</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">11:10 - 12:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《视觉艺术》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">观看艺术展</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">12:00 - 13:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">午餐</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">自备午餐</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">13:00 - 13:50</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《建筑艺术》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">欧洲建筑考察</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:00 - 14:40</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《戏剧艺术》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">大型魔术表演《大魔术师》</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:40 - 16:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">自由探索</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">探究电影制作、推理解密体验、密室大脱解密达芬奇电影工坊等</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">16:00 - </td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">返程</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">清点人数、集合返程。</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，华谊电影小镇的奇妙之旅已经准备好啦！这里有文化、有游乐、有特色，每一个项目都超好玩、超有趣！快来华谊电影小镇，一起开启这场超棒的研学冒险，收获满满的快乐和知识吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['知识性', '美观度', '体验感', '历史性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [8, 7, 9, 6, 7] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>